<template>
	<!-- 选择支付方式 -->
	<view class="selectWay">
		<view class="header">
			<view class="bg">
				<view class="methodsBox">
					<view class="itemBox flex-bc">
						<view class="methodsItem flex-bc" @touchstart="handleTouchstart" @touchend="handleTouchend">
							<view class="flex-c">
								<image class="wayLogo" src="../../../static/user/wechat11.png" mode=""></image>
								<text>167****4837</text>
							</view>
							<view class="flex-c">
								<image class="select" src="../../../static/user/select1.png" mode=""></image>
								<text>默认</text>
							</view>
						</view>
						<view class="operBox flex-c" v-if="isShowOper">
							<view class="default flex-c">
								<text>默认</text>
							</view>
							<view class="flex-c">
								<text>解绑</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="warmming flex">
					<text>*</text>向左滑动卡片设置{{title}}(最多添加4个)
				</view>
				<view class="addBtn flex-c" @click="fnToAddWay()">
					<text>+添加提现{{title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				title: '',
				type: '',
				//按下的时间
				startTime: 0,
				//按下的坐标
				startX: 0,
				startY: 0,
				isShowOper:true
			};
		},
		onLoad(option) {
			console.log(option.type)
			this.type = option.type
			switch (Number(option.type)) {
				case 0:
					this.title = '微信'
					break;
				case 1:
					this.title = '支付宝'
					break;
				case 2:
					this.title = '银行卡'
					break;
				default:
					break;
			}
			console.log(this.title)
		},
		methods: {
			fnToAddWay(){
				uni.navigateTo({
					url:`../addPayWay/addPayWay?type=&{this.type}`
				})
			},
			/*用户按下屏幕
			     1.记录用户按下屏幕的时间  Date.now() 时间戳 返回 1970-1-1到现在的毫秒数
			     2.记录用户按下屏幕的坐标x和y
			   */
			handleTouchstart(e) {
				//记录用户按下的时间
				this.startTime = Date.now();
				//记录用户按下的坐标
				this.startX = e.changedTouches[0].clientX;
				this.startY = e.changedTouches[0].clientY;
			},
			handleTouchend(e) {
				const endTime = Date.now();
				const endX = e.changedTouches[0].clientX;
				const endY = e.changedTouches[0].clientY;

				//判断按下的时长
				if (endTime - this.startTime > 2000) {
					return;
				}

				//滑动的方向
				let direction = "";

				//先判断用户滑动的距离  用[绝对值 ] 是否合法  合法：判断滑动的方向
				if (Math.abs(endX - this.startX) > 10 && Math.abs(endY - this.startY) < 10) {
					//滑动方向  结束大于

					direction = endX - this.startX > 0 ? "right" : "left";
				} else {
					return;
				}

				console.log(direction);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.selectWay {
		height: 100%;

		.header {
			height: 100%;
			background: #F22F29;
			width: 100%;

			.bg {
				height: 100%;
				background: #fff;
				border-radius: 30rpx 30rpx 0px 0px;
				padding: 40rpx 20rpx;
				box-sizing: border-box;

				.methodsBox {
					.itemBox{
						position: relative;
						.methodsItem {
							height: 160rpx;
							background: url(../../../static/user/wechat-bg.png)no-repeat center/100% 100%;
							margin-bottom: 20rpx;
							padding: 0 40rpx;
							box-sizing: border-box;
							color: #fff;
							transition: all .1s linear;
							left: -240rpx;//移动
							position: relative;
							width: 100%;
							.wayLogo {
								width: 48rpx;
								height: 48rpx;
								margin-right: 20rpx;
							}
						
							.select {
								height: 38rpx;
								width: 38rpx;
								margin-right: 10rpx;
							}
						}
					}
					.operBox{
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
						view{
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
							background: #FEEAE9;
							color: #F22F29;
							font-size: 26rpx;
							margin: 0 10rpx;
						}
						.default{
							background: #F7F8FC;
							color: #666;
						}
					}
					
				}

				.warmming {
					font-size: 28rpx;
					align-items: center;
					color: #999;
					margin: 20rpx 0 88rpx;

					text {
						color: #F22F29;
					}
				}

				.addBtn {
					width: 686rpx;
					height: 106rpx;
					background: #FEEAE9;
					border-radius: 20rpx;
					color: #F22F29;
					position: fixed;
					bottom: 88rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
